<template>
	<el-row>
		<el-button size="mini" type="primary" @click="addrole">添加</el-button>
		<el-button size="mini" type="primary" @click="updaterole">修改</el-button>

		<el-button size="mini" type="danger" @click="deleteRole">删除</el-button>
		


		<el-table height="400px" size="mini" ref="RoleTable" :data="studs" stripe tooltip-effect="dark" style="width: 100%"
		 @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column prop="studId" label="编号" width="200">
			</el-table-column>
			<el-table-column prop="studNo" label="学号" width="200">
			</el-table-column>
			<el-table-column prop="studName" label="姓名" width="180">
			</el-table-column>
			<el-table-column prop="studClass" label="班级" width="200">
			</el-table-column>
			<el-table-column prop="studTell" label="电话" width="180">
			</el-table-column>
			

		</el-table>
		<el-pagination background layout="prev, pager, next" :total="total" :current-page.sync="query.page" @current-change="pagechange">
		</el-pagination>
		<el-dialog :title="dialogtitle" :visible.sync="dialogVisible" width="50%">
			<el-form ref="form" :model="form" label-width="80px" size="mini">
				<el-form-item label="学号:">
					<el-input v-model="form.studNo"></el-input>
				</el-form-item>
				<el-form-item label="姓名:">
					<el-input v-model="form.studName"></el-input>
				</el-form-item>
				<el-form-item label="班级:">
					<el-input v-model="form.studClass"></el-input>
				</el-form-item>
				<el-form-item label="电话:">
					<el-input v-model="form.studTell"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false" size="mini">取 消</el-button>
				<el-button type="primary" size="mini" @click="save">确 定</el-button>
			</span>
		</el-dialog>

	</el-row>





</template>


<script>
	import {
		studPage,
		stud_save,
		stud_remove
	} from "@/api/bookt/studinfo.js"

	export default {
		data() {
			return {
				query: {
					page: 1,
					size: 10,
					// keyword: ''
				},
				studs: [],
				selectd: [],
				dialogVisible: false,
				dialogtitle: '添加',
				form: {

				},
				ids: [],
				total: null,
				dialogVisible1: false,
				state: [],
				// state_list:[]




			}


		},
		created() {
			this.getstudList()
		},
		methods: {
			getstudList() {
				studPage(this.query).then(res => {
					this.studs = res.data.list;
					this.total = res.data.total
					// console.log(this.studs)

				})
			},
			handleSelectionChange(e) {
				this.selectd = e
				console.log(e)

			},
			pagechange() {
				this.query.page = e
				getstudList()

			},
			updaterole() {
				if (this.selectd.length < 1) {
					this.$message({
						message: '请选择要修改的条目！',

					});
					return
				}
				if (this.selectd.length > 1) {
					this.$message({
						message: '只能选择一条！',

					});
					return

				}
				this.dialogVisible = true
				this.dialogtitle = '修改'
				this.form = this.selectd[0]






			},
			addrole() {

				this.dialogtitle = '添加'
				this.form = {}
				this.dialogVisible = true


			},

			save(obj) {
				this.dialogVisible = false
				console.log(this.form)
				
				stud_save(this.form).then(res => {
					// console.log(res)
					this.$message({
						message: res.msg,
						type: 'success'
				
					});
					this.getstudList()
					
				})










			},

			deleteRole() {
				if (this.selectd.length < 1) {
					this.$message({
						message: '请选择要删除的条目！',

					});
					return
				}

				for (var i = 0; i < this.selectd.length; i++) {
					this.ids.push(this.selectd[i].id)
					// console.log(this.ids)
				}



				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					center: true
				}).then(() => {

					stud_remove(this.ids).then(res => {
						this.$message({
							type: 'success',
							message: res.msg
						});
						this.getstudList()
					})


				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});

			},
			


		}

	}
</script>



